import { defineComponent, ref } from 'vue';
import useModule from './index.module';
import styles from './index.module.scss';

export default defineComponent({
  name: 'Collapse',
  props: {
    /** 左侧最小宽度 */
    minWidth: {
      type: Number,
      default: 300
    }
  },
  setup(props, { slots }) {
    const collapseContainer = ref(null);
    const resizeBar = ref(null);
    const {
      maxHeight,
      width,
      minExistWidth,
      maxWidth,
      methods
    } = useModule(props, collapseContainer, resizeBar);
    return () => (
      <div
        ref={collapseContainer}
        class={styles.collapseContainer}
      >
        <div
          class={styles.left}
          style={{
            height: maxHeight.value + 'px'
          }}
        >
          <div
            ref={resizeBar}
            class={styles.resizeBar}
            style={{
              '--min-width': methods.pxToPercent(props.minWidth),
              width: methods.pxToPercent(width.value)
            }}
          />
          <div class={styles.resizeLine} />
          {width.value > minExistWidth.value && (
            <div
              class={styles.leftConatiner}
              style={{
                width: (width.value === props.minWidth ? props.minWidth : width.value) - 3 + 'px'
              }}
            >
              {slots.left?.()}
            </div>
          )}
        </div>
        {width.value < (maxWidth.value - minExistWidth.value) && (
          <div class={[styles.right, styles.rightContainer]}>
            {slots.right?.()}
          </div>
        )}
      </div>
    )
  }
})
